<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>my demo</title>
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="index.css">
<body @resize="resize()">
<div id="container" class="cm-content">
  <div id="user">
    <div class="user-head">
      <div class="img">
        <img src="img/userHead.png" />
      </div>
      <div class="btn" v-show="false">
        <a>登陆</a>
        <span>/</span>
        <a>注册</a>
      </div>
      <div class="info">
        <span class="name">商城用户</span>
        <span class="nick">201712013265</span>
      </div>
    </div>
    <div class="user-order">
      <div class="user-order-item" v-for="items in userSet.list">
        <div class="user-order-item-title">
          <span class="left" v-text="items.title"></span>
          <span class="right" v-html="items.tip"></span>
        </div>
        <ul>
          <li class="left" v-for="item in items.data">
            <a @click='item.func'>
              <div class="img">
                <img :src="item.img">
              </div>
              <span v-text="item.name" :class="item.class"></span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="user-set" @click="userSetShow" v-show="userSet.isShow">
    <div class="cm-content">
      <div class="password" @click.stop v-show="userSet.infoSet.password">
        <div class="header">
          <span>修改密码</span>
        </div>
        <div class="content">
          <div class="input">
            <i class="fa fa-lock"></i>
            <input type="" name="" placeholder="请输入原密码">
          </div>
          <div class="input">
            <i class="fa fa-lock"></i>
            <input type="" name="" placeholder="请输入新密码">
          </div>
          <div class="submit">
            <a>提交</a>
          </div>
        </div>
      </div>
      <div class="head" @click.stop v-show="userSet.infoSet.head">
        <div class="header">
          <span>修改头像</span>
        </div>
        <div class="content">
          <div class="img">
            <img src="img/userHead.png" />
          </div>
        </div>
      </div>
      <div class="nick" @click.stop v-show="userSet.infoSet.nick">
        <div class="header">
          <span>修改头像</span>
        </div>
        <div class="content">
          <div class="input">
            <i class="fa fa-vcard"></i>
            <input type="" name="" placeholder="请输入新昵称">
          </div>
          <div class="submit">
            <a>提交</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="footer">
    <div class="cm-content">
        <ul class="list">
          <li v-for="(item,index) in footer.list" :style="footer.styleWidth">
          <a :class="{active : footer.count == index}" :href="item.href">
            <i :class="item.icon"></i>
            <span v-text="item.name"></span>
            <span v-if="index == 2 && footer.cartCount > 0" class="count">19</span>
          </a>
          </li>
        </ul>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#container',
    data: {
      footer: {
        list: [
          {name: '首页', icon: 'fa fa-2x fa-home', href: '#'},
          {name: '分类', icon: 'fa fa-2x fa-bars', href: '#'},
          {name: '购物车', icon: 'fa fa-2x fa-cart-plus', href: '#'},
          {name: '我的', icon: 'fa fa-2x fa-user-circle-o', href: '#'}
        ],
        count: 0,
        styleWidth: {
          width: '0%'
        },
        cartCount: 1
      },
      userSet: {
        list: [
          {
            title: '我的订单',
            tip: '  全部订单<i class="fa fa-chevron-right"></i>',
            data: [
              { name: '待付款', img: 'img/dfk.png', func: '#', class: '' },
              { name: '待发货', img: 'img/dfh.png', func: '#', class: '' },
              { name: '待收货', img: 'img/dsh.png', func: '#', class: '' },
              { name: '退换修', img: 'img/thx.png', func: '#', class: '' }
            ]
          },
          {
            title: '功能中心',
            tip: '<i class="fa fa-th-large blue"></i>',
            data: [
              { name: '收藏中心', img: 'img/like.png', func: '#' , class: 'blue'},
              { name: '收货地址', img: 'img/address.png', func: '#', class: 'blue'},
            ]
          },
          {
            title: '设置',
            tip: '<i class="fa fa-cog black"></i>',
            data: [
              { name: '修改密码', img: 'img/password.png', func: function(){
                vm.userSetFunc(true, 'password', true);
              }, class: 'black' },
              { name: '修改头像', img: 'img/head.png', func: function(){
                vm.userSetFunc(true, 'head', true);
              }, class: 'black' },
              { name: '修改昵称', img: 'img/nick.png', func: function(){
                vm.userSetFunc(true, 'nick', true);
              }, class: 'black' },
              { name: '关于手机', img: 'img/about.png', func: function(){
                vm.userSetFunc(true, 'password', true);
              }, class: 'black' },
              { name: '注销', img: 'img/exit.png', func: function(){
                vm.userSetFunc(true, 'password', true);
              }, class: 'black' }
            ]
          }
        ],
        isShow: false,
        infoSet: {
          password: false,
          head: false,
          nick: false
        }
      } 
    },
    created: function() {
      var length = this.footer.list.length;
      this.footer.styleWidth.width = 100 / length + '%';
    },
    mounted: function() {
    },
    methods: {
      userSetFunc: function (isShow, name, infoSetItem) {
        this.userSet.infoSet[name] =  infoSetItem;
        this.userSet.isShow = isShow;
      },
      userSetShow: function() {
        this.userSet.isShow = !this.userSet.isShow;
        for(var key in this.userSet.infoSet) {
          this.userSet.infoSet[key] = false;
        }
      }
    },
    watch: {
    }
  });
</script>
</html>